<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>template</title>

    <!-- Import Styles -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/public/stylesheet/shoppingCart.css">

</head>

<body>

    <div id="app">
        <!-- Template HTML, copy directly when writing new HTML -->
        <!-- Watch Vue tutorials before writing -->
        <el-container style="height: 100vh; border: 1px solid #eee">
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu @select="handleMenuSelect" v-model="currentTab">

                    <el-menu-item-group>
                        <el-menu-item index="1-1">My Orders</el-menu-item>
                        <el-menu-item index="1-2">Shopping Cart</el-menu-item>
                        <!-- <el-menu-item index="1-3">My Orders</el-menu-item> -->
                        <el-menu-item index="1-4">Profile</el-menu-item>
                    </el-menu-item-group>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 12px">
                    <el-button @click="handleHome" style="margin-right: 20px">
                        Home
                    </el-button>

                    <el-dropdown>
                        <img :src="userData.avatar" alt="Avatar"
                            style="width: 40px; height: 40px; border-radius: 50%; margin-right: 10px;">
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click="handleLogout">Logout</el-dropdown-item>
                            <el-dropdown-item>Switch Account</el-dropdown-item>

                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>{{ userData.nickname }}</span>
                    <span>{{ userData.userId }}</span>
                </el-header>


                <el-main>
                    <!-- Table Component -->
                    <!-- My Orders -->
                    <div v-if="currentTab === '1-1'">
                        <!-- Place My Orders content here -->
                        <el-table :data="sortedTableData" border>

                        <!-- Table Column Definitions -->
                            <el-table-column prop="id" label="Order ID" width="90"></el-table-column>
                            <el-table-column prop="storeName" label="Store"></el-table-column>
                            <el-table-column width="410" label="Ordered Products">
                                <el-table-column label="Product Name">
                                    <template slot-scope="scope">
                                        <el-table :data="scope.row.productList" :show-header="false">
                                            <el-table-column prop="name"></el-table-column>
                                        </el-table>
                                    </template>
                                </el-table-column>
                                <el-table-column label="Price">
                                    <template slot-scope="scope">
                                        <el-table :data="scope.row.productList" :show-header="false">
                                            <el-table-column prop="price"></el-table-column>
                                        </el-table>
                                    </template>

                                </el-table-column>
                                <el-table-column label="Quantity" width="100">
                                    <template slot-scope="scope">
                                        <el-table :data="scope.row.productList" :show-header="false">
                                            <el-table-column prop="number" width="75"></el-table-column>
                                        </el-table>
                                    </template>
                                </el-table-column>
                            </el-table-column>
                            <el-table-column prop="orderTime" label="Order Time"></el-table-column>
                            <el-table-column prop="priceAll" label="Total Price"></el-table-column>
                            <el-table-column prop="status" label="Order Status">
                                <template slot-scope="scope">
                                    <div v-if="scope.row.status === 1">Unpaid</div>
                                    <div v-if="scope.row.status === 2">Paid</div>
                                    <div v-if="scope.row.status === 3">In transit</div>
                                    <div v-if="scope.row.status === 5">Received</div>
                                </template>
                            </el-table-column>
                            <el-table-column prop="action" label="Action">
                                <template slot-scope="scope">
                                    <el-button v-if="scope.row.statusReturn === 1 && scope.row.status === 1" @click="payMyOrder(scope.row.id)"
                                        type="primary" size="mini">Pay</el-button>
                                    <el-button v-if="scope.row.statusReturn === 1 && scope.row.status === 3" @click="receiveOrder(scope.row.id)"
                                        type="success" size="mini">Receive</el-button>
                                    <el-button v-if="scope.row.statusReturn === 1 && scope.row.status === 5 " @click="showReturnDialog(scope.row.id)">Apply For Refund</el-button>
                                    <el-button v-if="scope.row.statusReturn === 2 && scope.row.returnForm.allowed === -1" disabled>Wait For Approval</el-button>
                                    <el-button v-if="scope.row.statusReturn === 2 && scope.row.returnForm.allowed === 0" disabled>Refund Rejected</el-button>
                                    <el-button v-if="scope.row.statusReturn === 2 && scope.row.returnForm.allowed === 1 && scope.row.returnForm.status === 1" @click="showTrackingDialog(scope.row.returnForm.id)">Tracking Number</el-button>
                                    <el-button v-if="scope.row.statusReturn === 2 && scope.row.returnForm.allowed === 1 && scope.row.returnForm.status === 3" disabled>In Refund</el-button>
                                    <el-button v-if="scope.row.statusReturn === 2 && scope.row.returnForm.allowed === 1 && scope.row.returnForm.status === 5" disabled>Refund Finished</el-button>
                                    <el-button v-if="scope.row.statusReturn === 3" disabled>退货完成</el-button>
                                </template>
                            </el-table-column>

                        </el-table>
                    </div>
                    <!-- Refund Reason Dialog -->
                    <el-dialog title="Request Refund" :visible.sync="returnReasonDialogVisible">
                        <div>
                            <el-radio-group v-model="selectedReason">
                                <el-radio label="Quality issue">Quality issue</el-radio>
                                <el-radio label="Not as described">Not as described</el-radio>
                                <el-radio label="Wrong item">Wrong item</el-radio>
                                <el-radio label="Other">Other</el-radio>
                            </el-radio-group>
                        </div>
                        <div v-if="selectedReason === 'Other'">
                            <el-input v-model="customReason" placeholder="Please enter the refund reason"></el-input>
                        </div>
                        <span slot="footer" class="dialog-footer">
                     <el-button @click="returnReasonDialogVisible = false">Cancel</el-button>
                      <el-button type="primary" @click="submitReturn">Submit</el-button>
                     </span>
                    </el-dialog>
                
                <!-- 填写物流单号对话框 -->
                <el-dialog title="Fill in the trackingNumber" :visible.sync="trackingDialogVisible">
                    <el-input v-model="trackingNumber" placeholder="Please fill in the trackingNumber"></el-input>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="trackingDialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitTrackingNumber">Submit</el-button>
                    </span>
                </el-dialog>


                    <!-- 购物车 -->
                    <div v-show="currentTab === '1-2'">
                        <!-- 搜索栏 -->
                        <el-input v-model="searchQuery" placeholder="搜索商品" style="margin-bottom: 20px;"></el-input>
                        <el-table ref="multipleTable" :data="filteredCartData" tooltip-effect="dark" style="width: 100%"
                            @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column prop="detail" label="Product Details" width="120">
                            </el-table-column>
                            <el-table-column prop="name" label="Product Name" width="120">
                            </el-table-column>
                            <el-table-column label="Image" width="100">
                                <!-- Custom column content -->
                                <template slot-scope="scope">
                                    <img :src="scope.row.imagePath" alt="Product Image"
                                        style="width: 80px; height: 80px;">
                                </template>
                            </el-table-column>
                            <el-table-column prop="status" label="Available" width="70">
                            </el-table-column>
                            <el-table-column prop="sold" label="Sold" width="70">
                            </el-table-column>
                            <el-table-column prop="stock" label="Stock" width="70">
                            </el-table-column>
                            <el-table-column prop="type" label="Product Type" width="100">
                            </el-table-column>


                            <el-table-column prop="price" label="Unit Price" width="120">
                            </el-table-column>

                            <el-table-column label="Quantity" show-overflow-tooltip width="120">
                                <template slot-scope="scope">
                                    <el-input v-model.number="scope.row.number" size="mini"
                                        @change="handleQuantityChange(scope.row)"></el-input>
                                </template>
                            </el-table-column>

                            <el-table-column label="Amount" show-overflow-tooltip>
                                <template slot-scope="scope">
                                    {{ scope.row.number * scope.row.price }}
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="180">
                               <template slot-scope="scope">
                                 <el-button size="mini" @click="removeItem(scope.row)">删除</el-button>
                                </template>
                             </el-table-column>

                        </el-table>
                        <!-- Bottom Total Row -->
                        <el-table :data="[totalRow]" style="width: 100%">
                            <el-table-column label="Selected Items">
                                <template slot-scope="scope">
                                    {{ selectedItems.length }}
                                </template>
                            </el-table-column>
                            <el-table-column label="Total Amount">
                                <template slot-scope="scope">
                                    {{ totalAmount }}
                                </template>
                            </el-table-column>
                            <el-table-column label="Action">
                                <template slot-scope="scope">
                                    <el-button type="primary" size="mini" v-if="scope.row.showSubmitButton"
                                        @click="submitOrder">Submit Order
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>


                    </div>


                    <el-dialog :visible.sync="orderPopupVisible" title="New Order" width="50%">
                        <div>
                            <el-table :data="newOrderData" border>
                                <!-- Table Column Definitions -->
                                <el-table-column prop="name" label="Product Name"></el-table-column>
                                <el-table-column prop="number" label="Product Quantity" width="120"></el-table-column>
                                <el-table-column prop="price" label="Unit Price" width="120"></el-table-column>
                                <el-table-column prop="priceAll" label="Total Amount" width="120"></el-table-column>
                                <el-table-column prop="orderTime" label="Order Time" width="160">
                                    <template slot-scope="scope">
                                        {{ formatDate(scope.row.orderTime) }}
                                    </template>
                                </el-table-column>
                            </el-table>


                            <!-- Payment Button -->
                            <div style="margin-top: 20px;">
                                <el-button type="primary" @click="payOrder">Pay</el-button>
                                <el-button @click="closeOrderPopup">Cancel</el-button>
                            </div>
                        </div>
                    </el-dialog>


                    <div v-show="currentTab === '1-4'">
                        <!-- Profile Content -->
                        <div class="profile-container">
                            <!-- Avatar -->
                            <div class="avatar-container">
                                <img :src="userData.avatar" alt="Avatar" class="avatar">
                                <input type="file" @change="handleAvatarChange" accept="image/*" class="avatar-upload">
                            </div>
                            <!-- Edit Profile Form -->
                            <div class="profile-form">
                                <div class="form-group">
                                    <label>Nickname:</label>
                                    <input type="text" v-model="userData.nickname" class="form-input">
                                </div>
                                <div class="form-group">
                                    <label>User ID:</label>
                                    <input type="text" v-model="userData.userId" class="form-input" disabled>
                                </div>
                                <div>
                                    <label>Password:</label>
                                    <el-input v-model="userData.password" type="password" placeholder="Enter password"
                                        show-password></el-input>

                                </div>
                            </div>
                            <div class="profile-form">
                                <div class="form-group">
                                    <label>Contact Number:</label>
                                    <input type="text" v-model="userData.phone" class="form-input">
                                </div>
                                <div class="form-group">
                                    <el-button @click="saveUserInfo()" class="save-button"
                                        type="primary">Save</el-button>

                                    <!-- Shipping Address -->
                                    <div class="address-section">
                                        <h3>Shipping Address</h3>

                                        <!-- Table to Display Shipping Addresses -->
                                        <el-table :data="userData.addresses" style="width: 100%" stripe>
                                            <el-table-column label="Name" prop="name"></el-table-column>
                                            <el-table-column label="Phone" prop="phone"></el-table-column>
                                            <el-table-column label="Address" prop="address"></el-table-column>
                                            <!-- Consider later if needed -->
                                            <el-table-column label="Action" width="200">
                                                <template slot-scope="scope">
                                                    <el-button @click="editAddress(scope.$index)" type="text"
                                                        size="small">Edit
                                                    </el-button>
                                                    <!-- <el-button @click="deleteAddress(scope.$index)" type="text" size="small">Delete</el-button> -->
                                                    <el-button v-if="!scope.row.addressIsDefault"
                                                        @click="setDefaultAddress(scope.$index)" type="text"
                                                        size="small">Set as Default
                                                    </el-button>
                                                    <el-button v-else disabled type="text" size="small">Default
                                                        Address</el-button>
                                                    <el-button @click="deleteAddress(scope.$index)" type="text"
                                                        size="small">Delete</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                        <el-button @click="addAddressDialogVisible = true" type="primary">Add
                                            Address</el-button>

                                        <el-dialog title="Edit Address" :visible.sync="dialogVisible">
                                            <el-form ref="editForm" :model="editForm" label-width="80px">
                                                <el-form-item label="Name" prop="name">
                                                    <el-input v-model="editForm.name"></el-input>
                                                </el-form-item>
                                                <el-form-item label="Phone" prop="phone">
                                                    <el-input v-model="editForm.phone"></el-input>
                                                </el-form-item>
                                                <el-form-item label="Address" prop="address">
                                                    <el-input v-model="editForm.address"></el-input>
                                                </el-form-item>
                                            </el-form>
                                            <div slot="footer" class="dialog-footer">
                                                <el-button @click="dialogVisible = false">Cancel</el-button>
                                                <el-button type="primary"
                                                    @click="saveEdit();dialogVisible = false">Confirm
                                                </el-button>
                                            </div>
                                        </el-dialog>
                                        <el-dialog title="Add Address" :visible.sync="addAddressDialogVisible">
                                            <el-form ref="addForm" :model="addForm" label-width="80px">
                                                <el-form-item label="Name" prop="name">
                                                    <el-input v-model="addForm.name"></el-input>
                                                </el-form-item>
                                                <el-form-item label="Phone" prop="phone">
                                                    <el-input v-model="addForm.phone"></el-input>
                                                </el-form-item>
                                                <el-form-item label="Address" prop="address">
                                                    <el-input v-model="addForm.address"></el-input>
                                                </el-form-item>
                                            </el-form>
                                            <div slot="footer" class="dialog-footer">
                                                <el-button @click="addAddressDialogVisible = false">Cancel</el-button>
                                                <el-button type="primary"
                                                    @click="addNewAddress();addAddressDialogVisible = false">Confirm
                                                </el-button>
                                            </div>
                                        </el-dialog>


                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </el-main>


            </el-container>
        </el-container>


    </div>


    <!-- Import Component Library -->
    <script src="/component/vue.js"></script>
    <script src="/component/axios-0.18.0.js"></script>

    <!-- Import JavaScript Files -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script type="module" src="/public/javascript/shoppingCart.js"></script>

    <!-- <script src="//unpkg.com/element-ui@2.15.14/lib/index.js"></script> -->


</body>

</html>